<template>
  <div ref="reportCardRef" class="report_card">
    <div class="a" />
    <div class="b" />
  </div>
</template>

<script>
export default {
  name: 'ReportCard',
  props: {
    width: {
      type: Number,
      default: () => 530
    }
  },
  watch: {
    width: {
      handler: function(v) {
        this.$nextTick(() => {
          this.$refs.reportCardRef.style.setProperty('--carWidth', `${v}px`);
          // this.$refs.reportCardRef.style.setProperty('--car', v);
        });
      },
      immediate: true
    }
  }
};
</script>

<style lang='scss' scoped>
$width: var(--carWidth, 530px);
// @function px($px) {
//   @return $px * $width;
// }
.report_card{
  // --v: calc(var(--car) * 1px);
  // width: $width;
  width: var(--carWidth);
  background-color: #000;
}
.a{
  // width: var(--carWidth);
  width:$width;
  height: 40px;
  background-color: aquamarine;
}
.b{
  // width: px(2);
  width: var(--carWidth);
  // width: px(2);
  height: 40px;
  background-color: red;
}
</style>
